<template>
  <div>
    <Col>
      <Card>
        <p slot="title">
          创建角色
        </p>
        <Row class="margin-top-10">
          <Col span="18">
            <Form :model="formValidate"
                  ref="formValidate"
                  :label-width="80">
              <FormItem label="角色名称"
                        prop="name">
                <Input v-model="formValidate.name"
                       placeholder="请输入角色名称"></Input>
              </FormItem>
              <FormItem label="角色描述"
                        prop="description">
                <Input v-model="formValidate.description"
                       type="textarea"
                       :rows="4"
                       placeholder="请输入角色描述"></Input>
              </FormItem>
              <FormItem label="选择权限"
                        prop="description">
                <div class="auth_select">
                  <Tree :data="auth_list" show-checkbox :check-strictly="true" @on-check-change="selectTreeChange"></Tree>
                </div>
              </FormItem>
              <FormItem>
                <Button type="primary"
                        @click="handleSubmit('formValidate')">提交</Button>
              </FormItem>
            </Form>
          </Col>
        </Row>
      </Card>
    </Col>
  </div>
</template>
<script>
import { getAuthList, createRole } from '@/api/main'
export default {
  data () {
    return {
      auth_type: localStorage.getItem('user_type'),
      auth_list: [],
      auth_selecte: [],
      auth_selected: [],
      formValidate: {
        name: '',
        description: '',
        auth_names: [],
      }
    }
  },
  methods: {
    selectTreeChange(e){
      let list = e.filter(item => { return item.checked == true })
      let arr = []
      list.map(item => {
        //console.log(item.key)
        arr.push(item.key)
      })
      //console.log(arr)
      this.auth_selecte = arr
      console.log(arr.join(','))
    },
    selectAuth (data) {
      this.auth_selecte = data;
    },
    handleSubmit () {
      let _this = this;
      //console.log(this.auth_selecte);return false;
      if (_this.formValidate.name == '') {
        this.$Message.error("请填写角色名称"); return false;
      }
      if (_this.formValidate.description == '') {
        this.$Message.error("请填写角色描述"); return false;
      }
      if (this.auth_selecte.length == 0) {
        _this.$Message.error("请选择权限"); return false;
      }
      let obj = {}
      obj.name = _this.formValidate.name
      obj.description = _this.formValidate.description
      obj.auth_selecte = _this.auth_selecte
      createRole(obj).then(res => {
        if (res.code === 0) {
          this.$Message.success('操作成功')
          this.$router.push({ name: 'role-list' })
          this.init()
        } else {
          this.$Message.error(res.text)
        }
      })
    },
    init () {
      getAuthList().then(res => {
        if(res.code == 0) {
          this.auth_list = res.data
        }
      })
    },
  },
  mounted () {
    this.init(0)
  },
}
</script>
<style type="text/css">
.auth_select {
	height: auto;
	border: 1px solid #dcdee2;
	border-radius: 5px;
	padding-left: 10px;
}
.auth_check {
	width: 45%;
	height: 35px;
	margin-left: 10px;
	display: inline-block;
	padding-left: 1%;
}
</style>
